<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-10-16 16:29:27
 * @LastEditTime: 2023-10-18 17:16:08
 * @LastEditors: huangshuai 
-->
<template>
  <el-dialog v-model="dialogVisible" title="举报内容详情" width="40%">
    <el-card class="box-card">{{ context }}</el-card>
    <div style="height: 20px"></div>
    <el-card>
      举报图片：
      <el-carousel height="150px">
        <el-carousel-item
          v-for="item in urlList"
          :key="item"
          style="width: 100%; display: flex; justify-content: center"
        >
          <el-image :src="item" fit="cover"></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-card>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";

const dialogVisible = ref<boolean>(false);
const context = ref<string>("");
const urlList = ref<any>([]);
const showDialog = (data: any) => {
  context.value = data.content;
  urlList.value = data.pictureUrlList;
  dialogVisible.value = true;
};
defineExpose({
  showDialog,
});
</script>

<style scoped lang="less">
.box-card {
  word-wrap: break-word;
}
</style>
